<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <p slot="title" style="font-size: larger;font-weight: bolder">博客管理 / 发布博客</p>
            <div>
                <Form ref="articleRef" :model="article" :rules="articleRule" :label-width="120" inline>
                    <FormItem label="文章标题：" prop="title">
                        <Input v-model="article.title" placeholder="请输入文章标题"/>
                    </FormItem>
                    <FormItem label="文章类别：" prop="categoryId">
                        <Select v-model="article.categoryId" style="position: relative;z-index: 10000">
                            <Option value="">请选择</Option>
                            <Option v-for="(item,index) in categoryList" :key="index" :value="item.cateId">
                                {{item.cateName}}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="文章描述：" prop="desc">
                        <Input style="width: 400px" type="textarea" v-model="article.desc" maxlength="250"
                               show-word-limit
                               placeholder="请输入文章描述"/>
                    </FormItem>
                    <Button type="primary" size="large" style="margin-left: 20px;width: 100px;"
                            @click="publish('articleRef')">发布
                    </Button>
                </Form>
            </div>
            <!--博客内容-->
            <div style="width: 100%">
                <mavon-editor style="height: 445px" :boxShadow="false" ref=md @imgAdd="$imgAdd"
                              v-model="article.content"
                              @imgDel="$imgDel"></mavon-editor>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // 存放文章信息
        article: {
          title: '',
          desc: '',
          categoryId: 0,
          pictures: [],
          content: ''
        },
        // 分类列表
        categoryList: [],
        // 表单校验规则
        articleRule:
          {
            title: [
              { required: true, message: '标题不能为空', trigger: 'blur' }
            ],
            categoryId:
              [
                { required: true, type: 'integer', message: '类别不能为空', trigger: 'blur' }
              ],
            desc:
              [
                { required: true, message: '文章描述不能为空', trigger: 'blur' }
              ]
          }
      }
    },
    mounted() {
      this.getCategoryList()
    },
    methods: {
      // 获取分类列表
      getCategoryList() {
        this.$http.get('category').then(res => {
          res = res.data
          this.categoryList = res.data
        })
      },
      // 上传图片，绑定@imgAdd event
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        var formdata = new FormData()
        formdata.append('file', $file)
        this.$http({
          url: 'article_pic',
          method: 'post',
          data: formdata,
          headers: { 'Content-Type': 'multipart/form-data' }
        }).then((res) => {
          res = res.data
          if (res.code === 5000) {
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            // $vm.$img2Url 详情见本页末尾
            this.$refs.md.$img2Url(pos, res.data)
            // 将图片添加到pictures中
            this.article.pictures.push(res.data)
            this.$Message.success(res.msg)
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 删除图片
      $imgDel(pos, $file) {
        this.$http.delete(`article_pic?picUrl=${pos[0]}`).then(res => {
          res = res.data
          if (res.code === 5014) {
            // 数组中删除元素
            var picIndex = this.article.pictures.indexOf(pos[0])
            this.article.pictures.splice(picIndex, 1)
            this.$Message.success(res.msg)
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 发布文章
      publish(name) {
        this.$refs[name].validate(valid => {
          if (!valid) return
          // 添加博客
          var params = new URLSearchParams(this.article)
          this.$http.post('article', params).then(res => {
            res = res.data
            if (res.code === 5100) {
              this.$Message.success(res.msg)
              this.$refs[name].resetFields()
              this.article.content = ''
              this.article.pictures = []
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
